<template>
	<div class="addProject business-workAdd">
		<div class="addForm zll-form">
			<el-form :model="addForm" :rules="rules" ref="addForm" class="demo-ruleForm">
				<el-row :gutter="40">
					<el-col :span="8">
						<el-form-item class="formList" prop="data1" label="计划类型：">
							<el-input clearable class="input_right" v-model="addForm.planTypeCn"
									  disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="data2" label="计划号：">
							<el-input clearable class="input_right" v-model="addForm.planCode" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" prop="data3" label="计划状态：">
							<el-input clearable class="input_right" v-model="addForm.planStatusCn"
									  disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="data4" label="计划日期：">
							<el-input clearable class="input_right" v-model="createTimeAndUser"
									  disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" prop="data5" label="关联订单：" v-show="addForm.planType == '1'">
							<p>
								{{orderTableList.length}}
								<el-tooltip placement="top" effect="light">
									<div slot="content">
										<li class="gl_list" v-for="(item,index) in orderTableList" :key="index">{{item.orderNum}}</li>
									</div>
									<span @click="showList" class="right_ii el-icon-info"></span>
								</el-tooltip>
							</p>
						</el-form-item>
						<el-form-item class="formList" prop="data6" label="完成日期：">
							<el-date-picker clearable class="input_right" v-model="addForm.completeTime"
											:disabled="type == 'see'"
											format="yyyy-MM-dd"
											value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<div class="tableList">
					<table border="1">
						<tr>
							<th>品类</th>
							<th>任务名称</th>
							<th width="250">规格</th>
							<th>单件万支</th>
							<th>件数</th>
							<th>任务量(万支)</th>
							<th>已完成(万支)</th>
							<th>完成率</th>
						</tr>
						<tr class="add_Table" v-for="(item,index) in planTableList" :key="index">
							<td v-if="type == 'devolve' || addForm.planType == '1'"><p>{{item.itemTypeId}}</p></td>
							<td v-else>
								<el-select v-model="item.itemTypeId" placeholder="" class="text_center" clearable
										   :disabled="type == 'see'">
									<el-option v-for="(item,index) in items" :key="index" :label="item"
											   :value="item"/>
								</el-select>
							</td>
							<td>
								<el-input v-model="item.planName" placeholder="" class="text_center" clearable
										  :disabled="type == 'see'" @blur="handleblur(item.planName)"></el-input>
							</td>
							<td v-if="type == 'devolve'|| addForm.planType == '1'"><p>{{item.gradeValue}}</p></td>
							<td v-else><el-input v-model="item.gradeValue" placeholder="" class="text_center" clearable
										  :disabled="type == 'see'"></el-input></td>
							<td>
								<el-input @input="item.thNumber=item.thNumber.replace(/[^0-9\.]/g,'')"
										  v-model="item.thNumber" @change="totalNumChange(item)" placeholder=""
										  class="text_center" clearable :disabled="type == 'see'"></el-input>
							</td>
							<td>
								<el-input @input="item.peieceNum=item.peieceNum.replace(/[^\d]/g,'')"
										  v-model="item.peieceNum" @change="totalNumChange(item)" placeholder=""
										  class="text_center" clearable :disabled="type == 'see'"></el-input>
							</td>
							<td><p>{{item.totalNum}}</p></td>
							<td><p>{{item.totalCompleteNum}}</p></td>
							<td><p>{{item.completePercent}}</p></td>
						</tr>
					</table>

					<div class="nav_list" v-if="type =='see'">
						<div class="_title"><i class="el-icon-s-promotion"></i>生产记录</div>
						<div class="tableList" style="margin-top: 0;" v-loading="hisLoading">
							<table border="1">
								<tr>
									<th>生产日期</th>
									<th>班次</th>
									<th>件数</th>
									<th>数量（万支）</th>
									<!--<th>确认人</th>-->
								</tr>
								<tr v-if="productHisTableList.length == 0" class="noData"><td colspan="4">暂无数据</td></tr>
								<tr v-else class="add_Table" v-for="(item, index) in productHisTableList"  :key="index">
									<td><p>{{ item.dutyDay }}</p></td>
									<td><p>{{ item.whiteDay =='1'?'白班':'夜班' }}</p></td>
									<td><p>{{ item.storageInCount }}</p></td>
									<td><p>{{ item.totalProductCount }}</p></td>
									<!--<td><p>{{ item.data5 }}</p></td>-->
								</tr>
							</table>
						</div>
					</div>
				</div>


				<div>
					<div class="gradeStyle" v-for="item in result" :key="item">{{item.gradeName}}    <div style="margin-left: 20px;">{{item.gradeValue}}</div>  <span @click="addCopy(item.gradeValue)">复制</span></div>
					
				</div>
			</el-form>
		</div>
	</div>
</template>
<script>
	import {getStore} from "@/plugins/localStore";
	import {formatDate} from "@/plugins/formatDate";

	export default {
		props: ['editData', 'type', 'selectItems'],
		data() {
			return {
				addForm: {
					id:'',
					planType: '1',
					planTypeCn: '订单',
					planCode: '',
					planStatusCn: '待生产',
					completeTime: '',
					itemTypeId: '',
					planName: '',
					gradeValue: '',
					thNumber: '',
					peieceNum: '',
					totalNum: '',
					completePercent: '',
					totalCompleteNum: '',
				},

				createTimeAndUser:'',
				rules: {},

				items: [],
				count: 0,
				user: {},

				orderTableList: [],
				planTableList: [],
				productHisTableList: [],
				hisLoading:false,
				result:[]
			}
		},
		methods: {
			addCopy(val) {
				const oInput = document.createElement('input')
				oInput.value = val
				document.body.appendChild(oInput)
				oInput.select()
				document.execCommand('Copy')
				this.$message({
					message: '复制成功',
					type: 'success'
				});
				oInput.remove()
			},
			handleblur(val){
				if(val==''){
					this.result = [];
					return false
				}
				let self = this;
				self.$http({
					url: "/jinl/plan/getGradeValueByName",
					method: "post",
					data: JSON.stringify({name:val}),
						dataType: 'json',
						contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.result = resp.result;
					}else{
						self.result = [];
					}
				});
			},
			showList() {

			},

			totalNumChange(item) {
				if (item.peieceNum && item.thNumber) {
					let totalNum = parseFloat(item.peieceNum) * parseFloat(item.thNumber);
					item.totalNum = totalNum.toFixed(4);
				} else {
					item.totalNum = '';
				}
			},

			getItemTypeName(order) {
				let self = this;
				let data = self.items.find((item) => item.id == order.itemTypeId);
				return data ? data.itemName : '';
			},

			submitForm(val) {
				let self = this;
				self.$refs['addForm'].validate((valid) => {
					if (valid) {
						if (!self.addForm.completeTime) {
							self.$message.warning('请输入计划完成日期！');
							return;
						}
						if(!self.planTableList[0].planName){
							self.$message.warning('请输入计划名称！');
							return;
						}
						if(!self.planTableList[0].thNumber){
							self.$message.warning('请输入单支！');
							return;
						}
						if(!self.planTableList[0].peieceNum){
							self.$message.warning('请输入件数！');
							return;
						}
						self.operate(val);
					} else {
						return false;
					}
				});
			},

			operate() {
				let self = this;
				let params = {};
				let planOrders = [];
				for(let data of self.orderTableList){
					planOrders.push({planId:'',orderId:data.id})
				}
				params = Object.assign({},self.addForm);
				params.planOrders = planOrders;
				let url = this.type == 'edit'?'/jinl/plan/updatePlanManage':'/jinl/plan/addPlanManage';
				if (self.count == 0) {
					self.$http({
						url: url,
						method: "post",
						data: JSON.stringify(params),
						dataType: 'json',
						contentType: "application/json",
					}).then(resp => {
						if (resp.success) {
							self.$notify({title: '提示', message: "操作成功！", type: 'success'});
							self.count--;
							if(self.type == 'devolve'){
								self.$eventBus.$emit("updatePlanOrderList");
							}else{
								self.$eventBus.$emit("updatePlanJHList");
							}
							self.$eventBus.$emit("getOrderPlanNum");
							return;
						}
						self.$notify({title: '提示', message: resp.message, type: 'error'});
						self.count--;
					});
					self.count++;
				}
			},

			getPlanOrders() {
				let self = this;
				self.orderTableList = [];
				self.$http({
					url: "/jinl/plan/getPlanOrders",
					method: "post",
					params:{planId:self.addForm.id}
				}).then(resp => {
					if (resp.success) {
						self.orderTableList = resp.result;
					}
				});
			},

			getOnDutyProductsByPlanId() {
				let self = this;
				self.productHisTableList = [];
				self.hisLoading = true;
				self.$http({
					url: "/jinl/dutyprod/getOnDutyProductsByPlanId",
					method: "post",
					params:{planId:self.addForm.id}
				}).then(resp => {
					self.hisLoading = false;
					if (resp.success) {
						self.productHisTableList = resp.result;
					}
				});
			},

		},

		watch: {
			selectItems(val) {
				this.items = val;
			},
			editData(val) {
				this.user = getStore();
				this.count = 0;
				if(this.type == 'beihuo'){
					//备货计划
					this.createTimeAndUser = this.user.userName + ' '+formatDate(new Date(),'yyyy-MM-dd');
					this.orderTableList = [];
					this.addForm.planType = '2';
					this.addForm.planTypeCn = '备货';
					this.addForm.planUserId = this.user.id;
					this.addForm.planUserName = this.user.userName;
					this.planTableList.push(this.addForm);
				}else if(this.type == 'edit' || this.type == 'see'){
					//修改
					for(let key in this.addForm){
						this.addForm[key] = val[key]?val[key]:''
					}
					this.createTimeAndUser = val.planUserName +' ' + val.createTimeFt;
					this.planTableList.push(this.addForm);
					this.getOnDutyProductsByPlanId();
					if(this.addForm.planType == '1'){
						this.getPlanOrders();
					}
				}else if(this.type == 'devolve'){
					//排产
					this.createTimeAndUser = this.user.userName + ' '+formatDate(new Date(),'yyyy-MM-dd');
					this.orderTableList = val;
					this.addForm.itemTypeId = this.orderTableList[0].itemTypeId;
					this.addForm.gradeValue = this.orderTableList[0].gradeValue;
					this.addForm.planUserId = this.user.id;
					this.addForm.planUserName = this.user.userName;
					this.planTableList.push(this.addForm);
				}
				console.log(this.planTableList)

			},

		},

		mounted() {

		},
		components: {}
	}
</script>
<style lang="scss" scoped>
	@import "@/style/dialog.scss";

	.business-workAdd.addProject {
		.right_ii {
			margin-left: 10px;
			color: #2196f3;
			font-size: 16px;
			cursor: pointer;
		}

		.nav_list {
			margin-top: 20px;
			._title {
				line-height: 40px;
				color: #00D1D0;
				i {
					font-size: 16px;
					margin-right: 5px;
				}
			}
		}

		.formList {
			margin-bottom: 0px;
		}

		.tableList {
			margin-bottom: 20px;

			table {
				tr {
					background: #fff !important;

					td {
						padding: 1px 3px;
					}
				}
			}
		}
	}
	.gradeStyle{
		color: #666;
		font-size: 14px;
		margin-bottom: 10px;
		display: flex;
		span{
			margin-left: 20px;
			cursor: pointer;
			color: #999;
		}
	}
</style>